/***** panel *****/
.screen-panel {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('../../images/border-top.png'), url('../../images/border-middle.png'), url('../../images/border-bottom.png');
  background-size: 100% 5vh, 100% calc( 100% - 10.5vh ), 100% 5.5vh;
  background-position: left top, left 5vh, left bottom;
  background-repeat: no-repeat;
}

.screen-panel-title {
  color: whitesmoke;
  padding: 1vh 1.5vw;
  line-height: 4vh;
  font-weight: bold;
}

.screen-panel-title-main {
  display: inline-block;
  position: relative;
  padding: 0 1.5vw 0 1vw;
}

.screen-panel-title-text {
  position: relative;
  z-index: 1;
  font-size: 2vh;
}

.screen-panel-title-main::before {
  content: '';
  display: inline-block;
  position: absolute;
  left: -0.5vw;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 3vh solid #ffdfe0;
  border-right: 0.8vw solid transparent;
}

.screen-panel-title-main::after {
  content: '';
  display: inline-block;
  background: linear-gradient(to right, #4756bd 0%,#3e83ce 100%);
  transform: skew(30deg) ;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.title-line {
  display: inline-block;
  position: absolute;
  bottom: -8px;
  height: 1px;
  left: 18px;
  right: -25px;
  background: #69c8fe;
}
.title-line::before, .title-line::after {
  content: '';
  display: inline-block;
  background: #69c8fe;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  position: absolute;
  transform: translateY(-50%);
}
.title-line::before {
  transform: translate(-50% -50%);
}
.title-line::after {
  right: 0;
}

.screen-panel-body {
  width: calc( 100% - 2vw );
  height: calc( 100% - 6.5vh );
  margin-left: 1vw;
  /*background-color: rgba(33, 33, 33, 0.6);*/
}
